import React, { useState } from 'react';
import { Form, Input, Select, DatePicker, Button, Table, Typography } from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import './AddDingDan.scss';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;
const { TextArea } = Input;
const { Title } = Typography;

interface CargoItem {
  id: string;
  name: string;
  spec: string;
  package: string;
  quantity: number;
  weight: number;
  volume: number;
}




const AddDingDan = () => {
 
  const [cargoList, setCargoList] = useState<CargoItem[]>([{
    id: '1',
    name: '',
    spec: '',
    package: '袋',
    quantity: 0,
    weight: 0,
    volume: 0
  }]);

  // 计算合计
  const totals = cargoList.reduce((acc, curr) => ({
    quantity: acc.quantity + curr.quantity,
    weight: acc.weight + curr.weight,
    volume: acc.volume + curr.volume
  }), { quantity: 0, weight: 0, volume: 0 });

  // 表格列配置
  const columns: any = [
    {
      title: '*货名',
      dataIndex: 'name',
      render: () => <Input variant="borderless" style={{ width: '100px' }} />,
      align: 'center'
    },
    {
      title: '规格型号',
      dataIndex: 'spec',
      render: () => <Input variant="borderless" style={{ width: '200px' }} />,
      align: 'center'
    },
    {
      title: '*总包装',
      dataIndex: 'package',
      render: (value: string, record: CargoItem, index: number) => (
        <div style={{width: '80px'}}>
          <Select defaultValue="袋" style={{ width: '100%', border:'none' }}>
            <Option value="袋">袋</Option>
            <Option value="箱">箱</Option>
            <Option value="托盘">托盘</Option>
          </Select>
        </div>
      ),
      align: 'center'
    },
    {
      title: '*总数量',
      dataIndex: 'quantity',
      render: () => <Input type="number" variant="borderless" style={{ width: '100px' }}/>,
      align: 'center'
    },
    {
      title: '*总重量kg',
      dataIndex: 'weight',
      render: () => <Input type="number" variant="borderless" style={{ width: '100px' }}/>,
      align: 'center'
    },
    {
      title: '总体积 m³',
      dataIndex: 'volume',
      render: () => <Input type="number" variant="borderless" style={{ width: '100px' }} />,
      align: 'center'
    },
    {
      title: '操作',
      render: (_: any, record: any) => (
        <Button
          icon={<MinusOutlined />}
          style={{ border: 'none' }}
          onClick={() => {
            if (cargoList.length > 1) {
              setCargoList(cargoList.filter(item => item.id !== record.id));
            }
          }}
        />
      ),
      align: 'center'
    }
  ];

  const navigate = useNavigate();

  return (
    <div className="order-container">
      <Title level={4} className="order-number">订单号：系统自动生成</Title>
      {/* 运输地址 */}
      <div className="section-card">
        <Title level={5} className="section-title">运输地址</Title>
        <Form layout="vertical" style={{ display: 'flex' }}>
          <Form.Item
            label="始发地"
            name="origin"
            className='formitem'
            rules={[{ required: true, message: '请选择始发地' }]}
          >
            <Select defaultValue={"上海市"}>
              <Select.Option value="上海市">上海市</Select.Option>
              <Select.Option value="北京市">北京市</Select.Option>
            </Select>
            <Input placeholder="请输入详细地址" variant="borderless" />
          </Form.Item>
          <Form.Item
            label="目的地"
            name="destination"
            className='formitem'
            rules={[{ required: true, message: '请选择目的地' }]}
          >
            <div>
              <Select defaultValue={"深圳市"}>
                <Select.Option value="深圳市">深圳市</Select.Option>
                <Select.Option value="广州市">广州市</Select.Option>
              </Select>
            </div>
            <Input placeholder="请输入详细地址" variant="borderless" />
          </Form.Item>

        </Form>

      </div>

      {/* 委托人信息 */}
      <div className="section-card">
        <Title level={5} className="section-title">委托人信息</Title>
        <Form layout="vertical" style={{ display: 'flex' }}>
          {['委托方', '委托人', '联系电话', '提货地址', '提货联系人'].map((label) => (
            <Form.Item key={label} label={`${label}`} name={label.toLowerCase()} rules={[{ required: true }]} style={{ border: '1px solid #ccc', width: '15%' }}>
              <div className='deriction' >
                <Input width={'100%'} style={{ border: 'none' }} />
              </div>
            </Form.Item>
          ))}
        </Form>

      </div>

      {/* 收货人信息 */}
      <div className="section-card">
        <Title level={5} className="section-title">收货人信息</Title>
        <Form layout="vertical" style={{ display: 'flex' }}>
          {['收货方', '收货人', '联系电话', '收货地址'].map((label) => (
            <Form.Item key={label} label={`${label}`} name={label.toLowerCase()} rules={[{ required: true }]} style={{ border: '1px solid #ccc', width: '15%' }}>
              <div className='deriction' >
                <Input width={'100%'} style={{ border: 'none' }} />
              </div>
            </Form.Item>
          ))}
        </Form>
      </div>

      {/* 计划时间 */}
      <div className="section-card">
        <Title level={5} className="section-title">计划时间</Title>

        <Form layout="vertical" style={{ display: 'flex' }}>
          <Form.Item label="计划装货时间" name="loadingTime" rules={[{ required: true }]} style={{ border: '1px solid #ccc', width: '20%' }}>
            <div className='deriction'>
              <DatePicker showTime style={{ width: '100%' }} />
            </div>
          </Form.Item>
          <Form.Item label="计划到货时间" name="arrivalTime" rules={[{ required: true }]} style={{ border: '1px solid #ccc', width: '20%' }}>
            <div className='deriction'>
              <DatePicker showTime style={{ width: '100%' }} />
            </div>
          </Form.Item>
        </Form>

      </div>

      {/* 货物信息 */}
      <div className="section-card">
        <Title level={5} className="section-title">货物信息</Title>
        <Table
          bordered
          columns={columns}
          dataSource={cargoList}
          pagination={false}
          summary={() => (
            <Table.Summary.Row >
              <Table.Summary.Cell index={0} />
              <Table.Summary.Cell align='center' index={1} >合计</Table.Summary.Cell>
              <Table.Summary.Cell index={2} />
              <Table.Summary.Cell align='center' index={3}>{totals.quantity}</Table.Summary.Cell>
              <Table.Summary.Cell align='center' index={4}>{totals.weight}</Table.Summary.Cell>
              <Table.Summary.Cell align='center' index={5}>{totals.volume}</Table.Summary.Cell>
              <Table.Summary.Cell index={6}>
                <Button
                  icon={<PlusOutlined />}
                  style={{ border: 'none', backgroundColor: '#f5f5f5' }}
                  onClick={() => {
                    setCargoList([...cargoList, {
                      id: Date.now().toString(),
                      name: '',
                      spec: '',
                      package: '袋',
                      quantity: 0,
                      weight: 0,
                      volume: 0
                    }]);
                  }}
                />
              </Table.Summary.Cell>
            </Table.Summary.Row>
          )}
        />
      </div>

      {/* 订单备注 */}
      <div className="section-card">
        <Title level={5} className="section-title">订单备注</Title>
        <Form.Item name="remark">
          <TextArea rows={4} placeholder="添加备注" />
        </Form.Item>
      </div>

      <div style={{ width: '140px', display: 'flex', justifyContent: 'space-between' }}>
        <Button type="default" onClick={() => { navigate('/admin/dingdan') }}>
          返回
        </Button>
        <Button type="primary" onClick={() => { navigate('/admin/dingdan') }}>
          提交
        </Button>
      </div>



    </div>

  );
};

export default AddDingDan;